<template>
<div class="adoptedTrends">
  <search-block>
    <template slot="button">
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="primary" @click="addTrends" v-if="isEdit">添加动态</el-button>
    </template>
    <el-form inline :model="model" @submit.native.prevent>
      <el-form-item label="描述:">
        <el-input v-model="model.trendsDescription"></el-input>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns"
  >
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150" v-if="isEdit">
      <template v-slot="scope">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="editTrends(scope.row)">编辑</el-button>
          <el-popconfirm
              title="是否确认删除该动态？"
              @confirm="delTrends(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    append-to-body
    width="50%"
    :form-attrs="forms.formAttrs"
    :columns="forms.formColumns"
    @ensure="ensureModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "adoptedTrends",
  inject: ['getDictNameSync'],
  props:{
    adoptedId: String,
    isEdit: Boolean
  },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.adopted.queryAdoptedTrendsList,
        param: Object.assign({
          adoptedId: this.adoptedId
        }, this.model)
      }
    }
  },
  data(){
    return {
      model:{
        trendsDescription: '',
      },
      columns: [{
        label: "描述",
        prop: "trendsDescription"
      },{
        label: "日期",
        prop: "trendsDate",
        width: 120
      },{
        label: "类型",
        prop: "trendsType",
        formatter: (function(row){
          return this.getDictNameSync(row.trendsType || '', 'adopted_trends_type');
        }).bind(this),
        width: 110
      }/*,{
        label: "图标",
        prop: "trendsIcon",
        template: true,
      }*/,{
        label: "操作人",
        prop: "updateUserName",
        width: 120
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加动态',
          'EDIT': '编辑动态'
        },
        formModel:{
          trendsDescription: '',
          trendsDate: '',
          trendsType: '',
          trendsIcon: '',
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            trendsDescription: [{required: true, message: "请输入动态描述", trigger: "blur"}],
            trendsDate: [{required: true, message: "请选择动态日期", trigger: "change"}],
            trendsType: [{required: true, message: "请选择动态类型", trigger: "change"}],
          }
        },
        formColumns:[
          {
            label: "动态描述",
            prop: "trendsDescription",
            comp:{
              compType: 'input',
              attrs:{
                type: 'textarea',
                maxlength: 50,
                showWordLimit: true,
                autosize: {
                  minRows: 3
                }
              }
            }
          },
          {
            label: "动态类型",
            prop: "trendsType",
            comp:{
              compType: 'YCodeSelect',
              attrs: {
                dict: 'adopted_trends_type',
                disabledValue: 'trends_zy'
              }
            }
          },
          /*{
            label: "动态图标",
            prop: "trendsIcon",
            template: true
          },*/
          {
            label: "动态日期",
            prop: "trendsDate",
            comp:{
              compType: 'datePicker',
              attrs: {
                type: "date",
                pickerOptions:{
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  },
                  shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                      picker.$emit('pick', new Date());
                    }
                  }]
                },
                valueFormat: 'yyyy-MM-dd'
              }
            }
          }
        ],
      }
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    addTrends(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    search(){
      this.$refs['table'].loadData(Object.assign({
        adoptedId: this.adoptedId
      }, this.model));
    },
    editTrends(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delTrends(row){
      this.$yAxios({
        url: this.$api.adopted.removeAdoptedTrends,
        data:{
          ids: [row.id]
        }
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({ adoptedId: this.adoptedId }, form);
      }
      this.$yAxios({
        url: this.$api.adopted.saveAdoptedTrends,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search();
      })
    },
  }
}
</script>

<style scoped>

</style>